<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Document</title>
</head>
<body>
	<div id="fei">
		<button @click="num++">+</button> {{num}}
		<af-button :num="num" @dian="shuzi"><template v-slot:header	="{a}">

			<span style="margin: 0 5px;">个杨凯斐，{{a}}</span>

		</template></af-button>
	</div>
</body>
<script src="./vue.js"></script>
<script>
	const {createApp,ref,computed} = Vue
	const app = createApp({
		setup(){
			let num = ref(0)

			function shuzi(v){
				num.value = v
			}
			return{
				num,
				shuzi,
			}
		}
	})
	app.component('af-button',{
		props:['num'],
		setup(props,{emit}){
			let num = computed(function(){
				return props.num
			})

			function jian(){
				emit('dian',num.value-1)
			}
			function jia(){
				emit('dian',num.value+1)
			}
			return{
				num,
				jian,
				jia
			}
		},
		template:`<div><button @click="jian">-</button><span>{{num}}<slot name="header" a="杨凯斐真捞" /></span><button @click="jia">+</button></div>`
	})

	app.mount('#fei')
</script>
</html>